<template>
  <div>
    <!-- <Header :sex="ballname" /> -->
    <div style="height:151px;"><head-temp title='双色球' headType='0'></head-temp></div>
    <div class="title_header">
      第{{ballName}}期
      <span>{{ballTime}}</span> 截止
    </div>
    <div class="first_box">
      <div class="redBox">
        <div style="margin-left: 0.05rem;">
          红球 至少选择
          <span style="color:#F84948">6个</span> 号
        </div>
        <ul>
          <li
            v-for="(item,index) in Redlist"
            :key="index"
            @click="changeColor($event,index)"
            ref="Rcor"
          >{{item}}</li>
        </ul>
      </div>

      <div class="BlueBox">
        <div style="margin-left: 0.05rem;">
          蓝球 至少选择
          <span style="color:#F84948">1个</span> 号
        </div>
        <ul>
          <li
            v-for="(item,index) in BlueList"
            :key="index"
            @click="changeBlue($event,index)"
            ref="Bcor"
          >{{item}}</li>
        </ul>
      </div>
    </div>

    <div class="bottom">
      <div class="iconBottom">
        <div>
          <!-- <img src="../../assets/image/copy.png" /> -->
        </div>
        <div class="lajitong">
          <img src="../../assets/image/delateArr.png" @click="handDetail" />
        </div>
      </div>
      <div class="ListBottom">
        已选
        <span>{{paynum ||0}}</span>注
        <i></i>共
        <span>{{money || 0}}</span>元
      </div>
      <div class="sendBottom" @click="handtwoList">保存</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, Toast } from "vant";
import axios from "axios";
import Header from "../../components/changePayHeader";
import ChangeSixTone from "../../components/changemachine";
import headTemp from '@/components/head2'
import count from "../../utils/suanfa";
import { getPhone } from "../../api/whole";
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Toast);
Vue.use(axios);
export default {
  name: "tocolorball",
  data() {
    return {
      ballname: "双色球",
      Redlist: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
        "32",
        "33"
      ],
      BlueList: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16"
      ],
      changeRedList: [], //普通 函数
      changeBlueList: [],
      ThreeChangeRedList: [], //胆选 函数
      ThreeChangeBlueList: "",
      ballName: "",
      ballTime: "",
      timeKeng:[],
      one:0,
      two:0
    };
  },
  methods: {
    handDetail() {
      this.changeRedList.length = 0;
      this.changeBlueList.length = 0;
      for (var i = 0; i < this.$refs.Rcor.length; i++) {
        this.$refs.Rcor[i].className = " ";
      }
      for (var i = 0; i < this.$refs.Bcor.length; i++) {
        this.$refs.Bcor[i].className = " ";
      }
      this.one = 0 ;
      this.two = 0;
    },
    handtwoList() {
      //进行判断是否有数字
      if (this.changeRedList.length <= 5 || this.changeBlueList.length <= 0) {
        Toast("请输入正确数字");
        return;
      }
      var obj = {};
      obj.changeRedList = this.changeRedList;
      obj.changeBlueList = this.changeBlueList;
      obj.paynum = this.paynum;
      obj.money = this.money;

      this.$store.state.twoball.push(obj);
 

        // 这层判断如果.length 为空 则不跳转过去 报错
       
       window.localStorage.setItem("twoball", JSON.stringify(this.$store.state.twoball));

      
      // 跳转地址
      this.$router.push(
        "/selectball/" +
          this.$route.path
            .split("/")
            .slice(-1)[0]
            .split("=")
            .slice(-1)[0]
      );
      
    },
    changeColor(e, index) {
      if (this.changeRedList.indexOf(e.target.innerHTML) == "-1") {
        this.changeRedList.push(e.target.innerHTML);
        this.$refs.Rcor[index].className = "active";
      } else {
        this.$refs.Rcor[index].className = " ";
        for (var i = 0; i < this.changeRedList.length; i++) {
          var mroeValue = e.target.innerHTML;
          if (this.changeRedList[i] == mroeValue) {
            this.changeRedList.splice(i, 1);
          }
        }
        return;
      }
    },
    changeBlue(e, index) {
      if (this.changeBlueList.indexOf(e.target.innerHTML) == "-1") {
        this.changeBlueList.push(e.target.innerHTML);
        this.$refs.Bcor[index].className = "activeB";
      } else {
        this.$refs.Bcor[index].className = " ";
        for (var i = 0; i < this.changeBlueList.length; i++) {
          var mroeValue = e.target.innerHTML;
          if (this.changeBlueList[i] == mroeValue) {
            this.changeBlueList.splice(i, 1);
          }
        }
        return;
      }
    }
  },
  components: {
    Header,
    ChangeSixTone,
    headTemp
  },
  created() {
    getPhone(this.$router.currentRoute.path.split("/")[this.$router.currentRoute.path.split("/").length - 1])
      .then(res => {
        (this.ballName = res.data.periodid),

        this.timeKeng=res.data.endtime.split(' ')[1].split(':');
        // 截取狗屁时分秒
        
        this.ballTime=`${res.data.endtime.split(' ')[0]} ${this.timeKeng.splice(-1),this.timeKeng.join(':')}`;
      });
  },
  computed: {
    paynum: function() {
      this.one = count(this.changeRedList.length, 6);
      this.two = count(this.changeBlueList.length, 1);

      return this.one * this.two;
    },

    money: function() {
      return this.paynum * 2;
    },
  }
};
</script>

<style scoped>
.lajitong{
      height: 100%;
    display: flex;
    align-items: center;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 0.5rem;
  display: flex;
  background: #fff;
}
.iconBottom {
  display: flex;
  width: 25%;
  align-items: center;
  justify-content: center;
}
.ListBottom {
  display: flex;
  align-items: center;
  font-size: 0.12rem;
  color: #a3a3a3;
  width: 40%;
}

.ListBottom i {
  width: 0.05rem;
}
.ListBottom span {
  color: #f84848;
  margin: 0 0.025rem;
  display: flex;
}
.sendBottom {
  display: flex;
  align-items: center;
  font-size: 15px;
  width: 35%;
  color: #ffffff;
  justify-content: center;
  background: #f84848;
}
.active {
  color: #fff !important;
  background: #f84848 !important;
  border: 1px solid #f84848 !important;
}
.activeB {
  color: #fff !important;
  background: #6092fb !important;
  border: 1px solid #6092fb !important;
}
.title_header {
  border-top: 1px solid #e4e4e4;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 0.4rem;
  background: #ffffff;
  font-size: 12px;
  line-height: 0.4rem;
  text-indent: 0.15rem;
  color: #999999;
}
.title_header span {
  color: #f84948;
}
/*  第一块 */

.first_box {
  margin-top: 0.4rem;
  /*height: 7.5rem;*/
  padding-bottom: .6rem;
  background: #f2f2f6;
  box-sizing: border-box;
}

.redBox {
  font-size: 12px;
  color: #999999;
  padding: 0.1rem;
}

.redBox ul {
  overflow: hidden;
}

.redBox ul li {
  float: left;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  color: #f84848;
  background: #fff;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 30px;
  font-size: 0.16rem;
  font-weight: 500;
  margin: 0.05rem;
}

.BlueBox {
  padding: 0.1rem;
  font-size: 12px;
  color: #999999;
}
.BlueBox {
  overflow: hidden;
}
.BlueBox ul li {
  float: left;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  color: #6092fb;
  background: #fff;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 30px;
  font-size: 0.16rem;
  font-weight: 500;
  margin: 0.05rem;
}
</style>